<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="m@markzou.com">
    <link rel="shortcut icon" href="favicon.png">
    <title>${(jshopbasicinfo.jshopname)} - 商城首页</title>

    <!-- fav icons -->
    <link rel="shortcut icon" href="${basepath}/ui/assets/img/favicon.png" />

    <link rel="stylesheet" type="text/css" href="${basepath}/ui/assets/css/inc_default_theme.css">
    <link rel="stylesheet" type="text/css" href="${basepath}/ui/assets/css/bootstrap.css">

    <script src="${basepath}/ui/assets/js/jquery-1.9.0.min.js"></script>
    <script src="${basepath}/ui/assets/js/bootstrap.min.js"></script>

    <!-- Just for debugging purposes. Don't actually copy this line! -->
    <!--[if lt IE 9]><script src="${basepath}/ui/assets/js/ie8-responsive-file-warning.js"></script><![endif]-->

    <!-- HTML5 shim and Respipond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="${basepath}/ui/assets/js/html5shiv.js"></script>
      <script src="${basepath}/ui/assets/js/respond.min.js"></script>
    <![endif]-->


</head>

<body>

<div class="container-fluid nopadding">

    <div class="page_content_innerpage">

        <div class="pc_head">

            <!-- 头部开始 -->
            <#include "/WEB-INF/theme/default/shop/header.ftl">
            <!--导航条-->
            <#include "/WEB-INF/theme/default/shop/mainnavigation.ftl">

        
        </div>
        <#if (goodsdetail??)>
        <div class="pc_local">
            <div class="pc_w1200">
                <ul class="gps">
                    <li><span class="glyphicon glyphicon-map-marker"></span></li>
                    <li><a href="">网站首页</a></li>
                    <li><a href="" class="current">${goodsdetail.goodsname}</a></li>
                </ul>
            </div>
        </div>

        <div class="pc_body">
            <div class="pc_w1200">

                <div class="pc_mod3">
                    <div class="pd_main">
                        <div class="pdm_detailinfo">
                            <div class="pdmd_tit">
                                ${goodsdetail.goodsname}
                            </div>
                            <div class="pdmd_price">
                                <div class="p_m">
                                    <div class="pm_l">价格</div>
                                    <div class="yj_price">￥${goodsdetail.price}</div>
                                </div>
                                <div class="p_m">
                                    <div class="pm_l">促销价</div>
                                    <div class="cx_price">￥<span>${goodsdetail.memberprice}</span></div>
                                </div>
                            </div>
                            <div class="pdmd_yunfei">
                                <div class="p_m">
                                    <div class="pm_l">运费</div>
                                    <div class="yj_price">
                                        ￥5.00
                                        <span>满69免运费</span>
                                    </div>
                                </div>
                            </div>
                            <ul class="stati">
                                <li style="border-right: 1px #ddd dotted;"><span>${goodsdetail.sales}</span>月销量</li>
                                <li style="border-right: 1px #ddd dotted;"><span>${goodsdetail.totalcomment}</span>累计评价</li>
                                <li><span>${goodsdetail.readcount}</span>累计浏览</li>
                            </ul>
                            <div class="pdmd_sl">
                                <div class="p_m">
                                    <div class="pm_l">购买数量</div>
                                    <div class="yj_price">
                                        <table>
                                            <tr>
                                                <td><button class="btn btn-default btn-xs" type="submit">-</button></td>
                                                <td style="padding: 0 5px; width: 50px;"><input type="email" class="form-control input-sm" id="quantity" name="quantity" value="1" placeholder=""></td>
                                                <td><button class="btn btn-default btn-xs" type="submit">+</button></td>
                                                <td><span>库存${goodsdetail.quantity}件</span></td>
                                            </tr>
                                        </table>
                                    </div>
                                </div>
                            </div>
                            <div class="pdmd_cart">
                                <div class="in_cart"><a href="javascript:addgoodstocart('${basepath}');"><span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span> 加入购物车</a></div>
                                <div class="now_cart"><a href="javascript:buynow('${basepath}','${goodsdetail.goodsid}');"><span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span> 立刻购买</a></div>
                            </div>
                            <div class="pps">* 如需开具发票，请在订单页注明。</div>
                        </div>
                        <div class="zoom_container">
                            <div id="preview" class="spec-preview">
                                 <#list goodsdetail.pictureurl?split(",") as atl>
                                    <#if atl_index=0>
                                    <span class="jqzoom"><img jqimg="${basepath}/${atl}" src="${basepath}/${atl}" /></span>
                                    </#if>
                                 </#list>      
                            </div>
                            <div class="spec-scroll"> <a class="prev">&lt;</a> <a class="next">&gt;</a>
                                <div class="items">
                                    <ul>
                                        <#list goodsdetail.pictureurl?split(",") as atl>
                                        <li><img bimg="${basepath}/${atl}" src="${basepath}/${atl}" onmousemove="preview(this);"></li>
                                        </#list>
                                        
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="bshare-custom" style="margin-top: 20px;">分享到：<a title="分享到QQ空间" class="bshare-qzone"></a><a title="分享到新浪微博" class="bshare-sinaminiblog"></a><a title="分享到人人网" class="bshare-renren"></a><a title="分享到腾讯微博" class="bshare-qqmb"></a><a title="分享到网易微博" class="bshare-neteasemb"></a><a title="更多平台" class="bshare-more bshare-more-icon more-style-addthis"></a><span class="BSHARE_COUNT bshare-share-count">0</span></div><script type="text/javascript" charset="utf-8" src="http://static.bshare.cn/b/button.js#style=-1&amp;uuid=&amp;pophcol=2&amp;lang=zh"></script><a class="bshareDiv" onclick="javascript:return false;"></a><script type="text/javascript" charset="utf-8" src="http://static.bshare.cn/b/bshareC0.js"></script>

                    </div>
                </div>
                <script type="text/javascript">
                    $(function(){
                        var url=window.location.href;
                        if (url.indexOf("#comment") > 0){
                            $("#gdetail").attr("class","");
                            $("#a1").attr("class","");
                            $("#gcomment").attr("class", "active");
                            $("#a2").attr("class","tab-pane active");
                        }
                    });
                </script>
                <#if (goodsdes??)>  
                <div class="pc_mod3">
                    <!-- Nav tabs -->
                    <ul class="nav pdetail_nav-tabs" role="tablist">
                        <li id="gdetail" role="presentation" class="active"><a href="#a1" aria-controls="detail" role="tab" data-toggle="tab">商品详情</a></li>
                        <li id="gcomment" role="presentation"><a href="#a2" aria-controls="comment" role="tab" data-toggle="tab">累计评价(${goodsdetail.totalcomment})</a></li>
                    </ul>

                    <!-- Tab panes -->
                    <div class="tab-content" style="margin-top: 30px;">
                        <div role="tabpanel" class="tab-pane active" id="a1">
                            ${goodsdes.detail}
                        </div>
                        <div role="tabpanel" class="tab-pane" id="a2">

                            <div class="pds_comment_main">

                                <div class="comment_did">
                                    <!--
                                    这里是未登录前显示的按钮
                                    <div class="no_login"><a href=""><span class="glyphicon glyphicon-user" aria-hidden="true"></span> 请登陆后评论</a></div>
                                    -->
                                    <form class="form-horizontal" style="padding-right: 70px; padding-top: 10px;">
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label">评价</label>
                                            <div class="col-sm-10">

                                                <script type="text/javascript">
                                                    window.onload = function (){

                                                        var oStar = document.getElementById("star");
                                                        var aLi = oStar.getElementsByTagName("li");
                                                        var oUl = oStar.getElementsByTagName("ul")[0];
                                                        var oSpan = oStar.getElementsByTagName("span")[1];
                                                        var oP = oStar.getElementsByTagName("span")[0];
                                                        var i = iScore = iStar = 0;
                                                        var aMsg = [
                                                            "很不满意|差得太离谱",
                                                            "不满意|部分有破损",
                                                            "一般|质量一般",
                                                            "满意|质量不错",
                                                            "非常满意|质量非常好"
                                                        ]

                                                        for (i = 1; i <= aLi.length; i++){
                                                            aLi[i - 1].index = i;

                                                            //鼠标移过显示分数
                                                            aLi[i - 1].onmouseover = function (){
                                                                fnPoint(this.index);
                                                                //浮动层显示
                                                                oP.style.display = "block";
                                                                //计算浮动层位置
                                                                oP.style.left = oUl.offsetLeft + this.index * this.offsetWidth - 104 + "px";
                                                                //匹配浮动层文字内容
                                                                oP.innerHTML = "<em><b>" + this.index + "</b> 分 " + aMsg[this.index - 1].match(/(.+)\|/)[1] + "</em>" + aMsg[this.index - 1].match(/\|(.+)/)[1]
                                                            };

                                                            //鼠标离开后恢复上次评分
                                                            aLi[i - 1].onmouseout = function (){
                                                                fnPoint();
                                                                //关闭浮动层
                                                                oP.style.display = "none"
                                                            };

                                                            //点击后进行评分处理
                                                            aLi[i - 1].onclick = function (){
                                                                iStar = this.index;
                                                                oP.style.display = "none";
                                                                oSpan.innerHTML = "<strong>" + (this.index) + " 分</strong> (" + aMsg[this.index - 1].match(/\|(.+)/)[1] + ")"
                                                            }
                                                        }

                                                        //评分处理
                                                        function fnPoint(iArg){
                                                            //分数赋值
                                                            iScore = iArg || iStar;
                                                            for (i = 0; i < aLi.length; i++) aLi[i].className = i < iScore ? "on" : "";
                                                        }

                                                    };
                                                </script>
                                                <div id="star">
                                                    <ul>
                                                        <li><a href="javascript:;">1</a></li>
                                                        <li><a href="javascript:;">2</a></li>
                                                        <li><a href="javascript:;">3</a></li>
                                                        <li><a href="javascript:;">4</a></li>
                                                        <li><a href="javascript:;">5</a></li>
                                                    </ul>
                                                    <span class="ms"></span>
                                                    <span class="ms"></span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label">内容</label>
                                            <div class="col-sm-10">
                                                <textarea id="commentcontent" class="form-control" rows="3"></textarea>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <div class="col-sm-2"></div>
                                            <div class="col-sm-10">
                                                <button onclick="savegoodscomment('${basepath}','${goodsdetail.goodsid}');" type="button" class="btn btn-danger">提交评价</button>
                                                <span id="emsg"></span>
                                            </div>
                                        </div>
                                    </form>
                                </div>

                                <div class="book_pbar">
                                    <#assign x=(goodsdetail.totalstaruser)>
                                    <#if (x=0)>
                                    <div class="star">0.0</div>
                                    <#else>
                                    <div class="star">${(goodsdetail.totalstar)/(goodsdetail.totalstaruser)}</div>
                                    </#if>
                                    <div class="keywords">(${goodsdetail.totalstaruser}人评价)</div>
                                    <#if starone??>
                                    <div class="starp">
                                        <span class="bookstarp s5-10"></span>
                                        <div class="progress">
                                            <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="${starone}" aria-valuemin="0" aria-valuemax="100" style="width: ${starone}%; min-width: 2em;">
                                                <span class="">${starone}%</span>
                                            </div>
                                        </div>
                                    </div>
                                    </#if>
                                    <#if startwo??>
                                    <div class="starp">
                                        <span class="bookstarp s5-20"></span>
                                        <div class="progress">
                                            <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="${startwo}" aria-valuemin="0" aria-valuemax="100" style="width: ${startwo}%; min-width: 2em;">
                                                <span class="">${startwo}%</span>
                                            </div>
                                        </div>
                                    </div>
                                    </#if>
                                    <#if starthree??>
                                    <div class="starp">
                                        <span class="bookstarp s5-30"></span>
                                        <div class="progress">
                                            <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="${starthree}" aria-valuemin="0" aria-valuemax="100" style="width: ${starthree}%; min-width: 2em;">
                                                <span class="">${starthree}%</span>
                                            </div>
                                        </div>
                                    </div>
                                    </#if>
                                    <#if starfour??>
                                    <div class="starp">
                                        <span class="bookstarp s5-40"></span>
                                        <div class="progress">
                                            <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="${starfour}" aria-valuemin="0" aria-valuemax="100" style="width: ${starfour}%; min-width: 2em;">
                                                <span class="">${starfour}%</span>
                                            </div>
                                        </div>
                                    </div>
                                    </#if>
                                    <#if starfive??>
                                    <div class="starp">
                                        <span class="bookstarp s5-50"></span>
                                        <div class="progress">
                                            <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="${starfive}" aria-valuemin="0" aria-valuemax="100" style="width: ${starfive}%; min-width: 2em;">
                                                <span class="">${starfive}%</span>
                                            </div>
                                        </div>
                                    </div>
                                    </#if>
                                </div>

                            </div>

                            <#if (goodscomments.getList()??)&&(goodscomments.getList()?size>0)>  
                            <div class="cl_list_tit">
                                <span class="red">所有来自购买者的评论</span>
                                <span class="num">共${goodscomments.totalRecord}条评论</span>
                            </div>
                            <ul class="bookpoint">
                                <#list goodscomments.getList() as f>
                                <li>
                                    <div class="usimg"><img data-src="holder.js/50x50" alt=""></div>
                                    <div class="pl_content">
                                        <div class="date">
                                            <div class="name">${f.replyorcommentusername}</div>
                                            <div class="star"><span class="bookstar s5-${f.score}0"></span></div>
                                            <div class="dd">${f.posttime}</div>
                                        </div>
                                        <div class="block show_textcontent" id="smallContent2" style="display:block">
                                            ${f.commentcontent}
                                        </div>
                                    </div>
                                </li>
                                </#list>
                            </ul>
                            </#if>
                            <!--评论分类-->
                            <#include "/WEB-INF/theme/default/shop/goodscommentsplitpage.ftl">
                        </div>
                        
                    </div>

                </div>
                </#if>
                
                <!--隐藏参数-->
                <input type="hidden" id="hidgoodsid" name="hidgoodsid" value="${goodsdetail.goodsid}"/>
            </div>
        </div>
        </#if>
        <#include "/WEB-INF/theme/default/shop/footer.ftl">

    </div>

</div>

<script src="${basepath}/ui/assets/js/tab.js"></script>
<script src="${basepath}/ui/assets/js/jquery.jqzoom.js"></script>
<script src="${basepath}/ui/assets/js/product_detail_zoom.js"></script>
<script src="${basepath}/ui/js/mycart.js"></script>
<script src="${basepath}/ui/js/goodscomment.js"></script>

</body>
</html>
